<template>
	<view class="my-preview">
		<MyNavbar :backIcon="false" backgroundColor="#000000"></MyNavbar>
		<view class="my-preview-main">
			<view class="main-header">
				<image class="header-left-icon" src="/static/img/icon_back.png" @click.stop="on('clickLeftIcon', $event)"></image>
				<view class="header-text">{{ current + 1 }}/{{ urls.length }}</view>
				<image class="header-right-icon" src="/static/img/icon_delete.png" @click.stop="on('clickRightIcon', $event)"></image>
			</view>
			<swiper class="main-swiper" :current="current" @change="on('change', $event)">
				<swiper-item v-for="(i, j) in urls" :key="j">
					<movable-area style="width: 100%;height: 100%;">
						<movable-view style="width: 100%;height: 100%;" :scale="true" direction="all" :scale-value="current == j ? 1 : 0.99">
							<image style="width: 100%;height: 100%;" :src="i" mode="aspectFit"></image>
						</movable-view>
					</movable-area>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
function ifObject(data) {
	return typeof data === 'object' && !Array.isArray(data) && data !== null;
}

function ifArray(data) {
	return Array.isArray(data);
}

export default {
	name: 'my-previewer',
	data() {
		return {
			current: 0
		};
	},
	props: {
		os: {
			type: Object,
			default: () => {
				return {
					// show: 0,
					// urls: [
					// 	'https://img2.woyaogexing.com/2022/04/16/6aa9039294cf44dfaa9e18848a35ba57!400x400.jpeg',
					// 	'https://img2.woyaogexing.com/2022/04/19/c550d7cf79cc4a1faa09d684f458d30e!400x400.jpeg',
					// 	'https://img2.woyaogexing.com/2022/04/19/eca4b8497b4f428cb6a4125ac501c7dc!400x400.jpeg'
					// ]
				};
			}
		}
	},
	computed: {
		urls() {
			if (!ifArray(this.os.urls)) this.$set(this.os, 'urls', []);
			return this.os.urls;
		}
	},
	methods: {
		on(functionName = '', event, payload) {
			const fName1 = 'on' + functionName.replace(functionName[0], functionName[0].toUpperCase());
			const fName2 = 'handle' + functionName.replace(functionName[0], functionName[0].toUpperCase());

			let contexts = ifObject(payload) ? (ifArray(payload.contexts) ? payload.contexts : []) : [];
			let indexs = ifObject(payload) ? (ifArray(payload.indexs) ? payload.indexs : []) : [];
			let isBreak = false;
			if (!isBreak) {
				if (typeof this.os.before === 'function') {
					isBreak = this.os.before({
						fn: functionName,
						e: event,
						p: payload,
						cs: contexts,
						is: indexs,
						o: this.os
					});
				}
			}
			if (!isBreak) {
				if (this.os[fName1] !== undefined) {
					if (typeof this.os[fName1] === 'function') {
						isBreak = this.os[fName1]({
							fn: functionName,
							e: event,
							p: payload,
							cs: contexts,
							is: indexs,
							o: this.os
						});
					}
				} else if (typeof this[fName1] === 'function') {
					this[fName1](functionName, event, payload);
				}
			}
			if (!isBreak) {
				if (typeof this.os[fName2] === 'function') {
					isBreak = this.os[fName2]({
						fn: functionName,
						e: event,
						p: payload,
						cs: contexts,
						is: indexs,
						o: this.os
					});
				}
			}
			if (!isBreak) {
				this.$emit('handle', {
					fn: functionName,
					e: event,
					p: payload,
					cs: contexts,
					is: indexs,
					o: this.os
				});
			}
		},
		onChange(fn, e) {
			this.current = e.detail.current;
		}
	}
};
</script>

<style scoped>
.my-preview {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1000;
	background-color: #000000;

	display: flex;
	flex-direction: column;
}

.my-preview-statusbar {
	background-color: #000000;
}

.my-preview-main {
	flex: 1;
	background-color: #ffffff;
	border-radius: 30rpx 30rpx 0 0;

	padding-bottom: 153rpx;
	display: flex;
	flex-direction: column;
}

.main-header {
	position: relative;

	padding: 40rpx 30rpx 80rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header-left-icon {
	width: 18rpx;
	height: 32rpx;
	z-index: 1;
}

.header-right-icon {
	width: 36rpx;
	height: 41rpx;
	z-index: 1;
}

.header-text {
	position: absolute;
	left: 0;
	right: 0;

	font-size: 40rpx;
	text-align: center;
	color: #222222;
}

.main-swiper {
	flex: 1;
	background-color: #000000;
}
</style>
